<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Adventure Log</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ng-container *ngIf="gameService.adventureLog$ | async as log">
    <div class="blank-slate" *ngIf="log.length === 0">
      You have no adventure log data.
    </div>

    <ion-list>
      <ion-item *ngIf="gameService.gameSettings.motd" color="medium">
        <ion-label [innerHTML]="gameService.gameSettings.motd | linkify"></ion-label>
      </ion-item>

      <ion-item *ngFor="let item of log">
        <ion-icon slot="start" [src]="'assets/icon/symbol-' + item.type + '.svg'"></ion-icon>

        <ion-label class="ion-text-wrap">
          <h3>{{ item.when | date:'medium' }}</h3>
          <p>{{ item.message }}</p>
        </ion-label>

        <ion-button *ngIf="item.link" (click)="openLink(item.link)">View URL</ion-button>
        <ion-button *ngIf="item.combatString" (click)="openCombat(item.combatString)">View Combat</ion-button>
      </ion-item>
    </ion-list>
  </ng-container>
</ion-content>
